<template>
  <div>
    <van-nav-bar
        title="用户详情"
        left-arrow
        @click-left="goBack"
    />

    <van-cell-group :title="'用户编号：'+user.id">
      <van-cell>
        <van-field label="姓名" :value="user.name" readonly />
        <van-field label="学号/工号" :value="user.number" readonly />
        <van-field label="性别" :value="user.sex" readonly />
        <van-field label="电话" :value="user.phone" readonly />
      </van-cell>
    </van-cell-group>
    <van-cell-group title="修改密码">
      <van-form @submit="updatePassword">
        <van-field
            v-model="oldPassword"
            type="password"
            name="旧密码"
            label="旧密码"
            placeholder="旧密码"
            :rules="[{ required: true, message: '请填写旧密码' }]"
        />
        <van-field
            v-model="newPassword"
            type="password"
            name="新密码"
            label="新密码"
            placeholder="新密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
            v-model="newPassword2"
            type="password"
            name="validator"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ validator, message: '密码不一致' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-cell-group>



  </div>
</template>

<script>
import {updatePassword} from '@/api/user'
import {Dialog} from "vant";

export default {
  created() {
    console.log(this.user)
  },
  data(){
    return{
      newPassword2:"",
      user:this.$route.params,
      active:1,
      newPassword:"",
      oldPassword:""
    }
  },
  methods:{
    validator() {
      return this.newPassword2 === this.newPassword;
    },
    goBack(){
      this.$router.go(-1)
    },
    updatePassword(){
      Dialog.confirm({
        title: '确认提交',
        message: '确认修改密码？',
      }).then(()=>{
        let params = new URLSearchParams();
        params.append("newPassword",this.newPassword);
        params.append("oldPassword",this.oldPassword);
        updatePassword(params).then(response=>{
          if(response.code==="200"){
            Dialog.alert({
              title: '修改成功',
              message: '密码修改成功，请重新登录',
            })
            this.$router.push('/login')
          }
        })
      })

    }
  },

  name: "userDetails"
}
</script>

<style scoped>

</style>
